import React from 'react'
import './Post.scss'
import Avatar from '@mui/material/Avatar';
import VerifiedUserIcon from '@mui/icons-material/VerifiedUser';
import ChatBubbleOutlineIcon from '@mui/icons-material/ChatBubbleOutline';
import RepeatIcon from '@mui/icons-material/Repeat';
import FavoriteBorderIcon from '@mui/icons-material/FavoriteBorder';
import PublishIcon from '@mui/icons-material/Publish';
function Post({displayname,username,verified,text,image,avatar}) {
  return (
    <div className='Post'>
      <div className='Post_avatar'>
        <Avatar src={avatar}/>
      </div>
      <div className='Post_body'>
        <div className='Post_header'>
          <div className='Post_headertext'>
            <h3>
              {displayname}{''}
              <span className='Post_headerspecial'>
                {verified && <VerifiedUserIcon className='Post_badge'/>}@{username}
              </span>
            </h3>
          </div>
          <div className='Post_headerdescription'>
            <p>{text}</p>
          </div>
        </div>
        <img src={image} alt=''/>
        <div className="Post_footer">
          <ChatBubbleOutlineIcon fontSize='small'/>
          <RepeatIcon fontSize='small'/>
          <FavoriteBorderIcon fontSize='small'/>
          <PublishIcon fontSize='small'/>
        </div>
      </div>
    </div>
  )
}

export default Post